import { useSelector, useDispatch } from 'react-redux'
import { filterList } from '../store/action'

const TodoFooter = () => {
  const list = useSelector((state) => state.todos)
  const type = useSelector((state) => state.type)
  const listType = ['all', 'active', 'completed']
  const leftNum = list.filter((item) => item.done !== true).length
  const dispatch = useDispatch()
  const handleClick = (todoType) => {
    dispatch(filterList(todoType))
  }
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftNum}</strong> item left
      </span>
      <ul className="filters">
        {listType.map((item) => {
          return (
            <li key={item}>
              <a
                className={item === type ? 'selected' : ''}
                href="#/"
                onClick={() => handleClick(item)}
              >
                {item}
              </a>
            </li>
          )
        })}
        {/*  */}
      </ul>
      <button className="clear-completed">Clear completed</button>
    </footer>
  )
}

export default TodoFooter
